<!--通话记录-->
<template>
  <pure-table
    ref="pureTable"
    :columns="columns"
    :list-api="listApi"
    :query-condition="queryCondition"
  >
    <template #header>
      <query-panel
        @query="onQuery"
        @reset="onReset"
      >
        <el-form-item>
          <el-input
            v-model="formData.keywords"
            placeholder="电话号码/工单号"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formData.type"
            placeholder="电话类型"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formData.time"
            align="right"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formData.reception"
            placeholder="坐席人"
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formData.dealType"
            class="base-margin-right"
            collapse-tags
            filterable
            placeholder="处置类型"
            size="mini"
          >
            <el-option
              v-for="item in receptionList"
              :key="item.userId"
              :label="item.name"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>

      </query-panel>
    </template>

    <template #columns="{row,prop}">
      <!--  电话类型-->
      <template v-if="prop==='callType'">
        <pure-type-text
          :config="CALL_TYPE"
          :type="row[prop]"
        />
      </template>
      <!--  通话时间-->
      <template v-else-if="prop==='createTime'">
        {{ row[prop] | timeFormat }}
      </template>
      <!--  录音-->
      <template v-else-if="prop==='recording'">
        <pure-audio :the-url="row[prop]" />
      </template>
      <template v-else>
        {{ row[prop] }}
      </template>
    </template>
  </pure-table>

</template>

<script>
import QueryPanel from '@/common/components/query/queryPanel.vue';
import TicketCallRecordApi from './api';
import { CALL_TYPE, } from './config';

export default {
  name: '',
  components: {
    QueryPanel,
  },
  data() {
    return {
      CALL_TYPE,
      columns: [
        {
          name: '(关联)工单号',
          label: '(关联)工单号',
          prop: 'orderNum',
          id: 1,
          order: 1,
          checked: true,
        },
        {
          name: '电话类型',
          label: '电话类型',
          prop: 'callType',
          id: 1,
          order: 1,
          checked: true,
        },
        {
          name: '电话号码',
          label: '电话号码',
          prop: 'phone',
          id: 3,
          order: 3,
          checked: true,
        }, {
          name: '号码所属人',
          label: '号码所属人',
          prop: 'user',
          id: 4,
          order: 4,
          checked: true,
        }, {
          name: '处置类型',
          label: '处置类型',
          prop: 'dealType',
          id: 1,
          order: 1,
          checked: true,
        }, {
          name: '通话时间',
          label: '通话时间',
          prop: 'createTime',
          id: 2,
          order: 2,
          checked: true,
        }, {
          name: '录音',
          label: '录音',
          prop: 'recording',
          id: 6,
          order: 6,
          checked: true,
        }, {
          name: '坐席人',
          label: '坐席人',
          prop: 'nickName',
          id: 6,
          order: 6,
          checked: true,
        },
      ],
      formData: {
        // 处置类型
        dealType: '',
        time: [],
        // 开始时间(yyyy-MM-dd HH:mm:ss)
        startTime: '',
        // 结束时间(yyyy-MM-dd HH:mm:ss)
        endTime: '',
        // 电话号码/工单号
        keywords: '',
        // 坐席人id
        reception: '',

        // 电话类型：0已接，1呼出，2未接
        type: '',
      },
      listApi: TicketCallRecordApi.callRecordList,
      queryCondition: {
        startTime: null,
        endTime: null,
        type: null,
        outPhone: null,
        helpDeskUser: null,
      },
      callTypeList: [
        {
          name: '未接',
          value: 2,
        }, {
          name: '已接',
          value: 0,
        }, {
          name: '拨出',
          value: 1,
        },
      ],
      receptionList: [],
    };
  },
  async created() {
    // this.receptionList = await ServiceDeskApi.receptionList();
  },
  methods: {
    async onQuery() {
      this.queryCondition = {
        ...this.formData,
      };
      this.queryCondition.startTime = this.formData.time?.[0] || null;
      this.queryCondition.endTime = this.formData.time?.[1] || null;
    },
    async onReset() {
      this.formData = {
        // 处置类型
        dealType: '',
        time: [],
        startTime: '',
        endTime: '',
        keywords: '',
        reception: '',
        type: '',
      };
      this.queryCondition = {
        startTime: null,
        endTime: null,
        type: null,
        outPhone: null,
        helpDeskUser: null,
      };
    },
  },
};
</script>

<style lang='scss'
  scoped
>
//@import "~@/styles/ticket.scss";
</style>
